import React, { useState, useEffect } from 'react';
import { Switch, Card, Descriptions, Badge, Button, Space, Alert } from 'antd';
import { ApiOutlined, BugOutlined, SettingOutlined } from '@ant-design/icons';
import { apiModeUtils } from '../../services/apiConfig';

/**
 * API模式切换组件
 * 用于开发工具中运行时查看和切换API模式
 */
const ApiModeSwitch: React.FC = () => {
  const [apiModeInfo, setApiModeInfo] = useState(apiModeUtils.getApiModeInfo());
  const [refreshKey, setRefreshKey] = useState(0);

  // 刷新API模式信息
  const refreshInfo = () => {
    setApiModeInfo(apiModeUtils.getApiModeInfo());
    setRefreshKey(prev => prev + 1);
  };

  useEffect(() => {
    refreshInfo();
  }, []);

  // 获取状态标签
  const getStatusBadge = (useMock: boolean) => {
    return useMock ? (
      <Badge status="processing" text="Mock API" />
    ) : (
      <Badge status="success" text="Real API" />
    );
  };

  // 获取环境标签
  const getEnvironmentBadge = (env: any) => {
    if (env.IS_DEV) {
      return <Badge status="warning" text="Development" />;
    } else if (env.IS_PROD) {
      return <Badge status="error" text="Production" />;
    } else {
      return <Badge status="default" text={env.MODE} />;
    }
  };

  return (
    <Card
      title={
        <Space>
          <ApiOutlined />
          API 模式控制
        </Space>
      }
      size="small"
      extra={
        <Button 
          size="small" 
          icon={<SettingOutlined />} 
          onClick={refreshInfo}
        >
          刷新
        </Button>
      }
    >
      <Space direction="vertical" style={{ width: '100%' }}>
        {/* 当前状态 */}
        <Alert
          message={`当前使用: ${apiModeInfo.useMock ? 'Mock API' : 'Real API'}`}
          type={apiModeInfo.useMock ? 'info' : 'success'}
          showIcon
          icon={apiModeInfo.useMock ? <BugOutlined /> : <ApiOutlined />}
        />

        {/* 详细信息 */}
        <Descriptions size="small" column={1} bordered>
          <Descriptions.Item label="API模式">
            {getStatusBadge(apiModeInfo.useMock)}
          </Descriptions.Item>
          
          <Descriptions.Item label="环境">
            {getEnvironmentBadge(apiModeInfo.environment)}
          </Descriptions.Item>
          
          <Descriptions.Item label="请求日志">
            <Switch 
              checked={apiModeInfo.logRequests} 
              size="small" 
              disabled 
              checkedChildren="开启" 
              unCheckedChildren="关闭" 
            />
          </Descriptions.Item>
          
          <Descriptions.Item label="Mock延迟">
            <Space size="small">
              <span>默认: {apiModeInfo.mockDelay.DEFAULT}ms</span>
              <span>快速: {apiModeInfo.mockDelay.FAST}ms</span>
              <span>慢速: {apiModeInfo.mockDelay.SLOW}ms</span>
            </Space>
          </Descriptions.Item>

          <Descriptions.Item label="环境变量">
            <Space direction="vertical" size="small">
              <div>MODE: <code>{apiModeInfo.environment.MODE}</code></div>
              <div>DEV: <code>{String(apiModeInfo.environment.IS_DEV)}</code></div>
              <div>PROD: <code>{String(apiModeInfo.environment.IS_PROD)}</code></div>
              {apiModeInfo.environment.USE_MOCK_OVERRIDE && (
                <div>VITE_USE_MOCK: <code>{apiModeInfo.environment.USE_MOCK_OVERRIDE}</code></div>
              )}
            </Space>
          </Descriptions.Item>
        </Descriptions>

        {/* 说明信息 */}
        <Alert
          message="API模式说明"
          description={
            <div>
              <p><strong>Mock API:</strong> 使用本地模拟数据，适合前端开发和演示</p>
              <p><strong>Real API:</strong> 连接真实后端服务，适合联调和生产</p>
              <p><strong>切换方式:</strong> 通过环境变量 VITE_USE_MOCK 控制，或重新构建项目</p>
            </div>
          }
          type="info"
          showIcon={false}
        />

        {/* 运行时信息 */}
        <div style={{ fontSize: '12px', color: '#666' }}>
          <div>刷新次数: {refreshKey}</div>
          <div>当前时间: {new Date().toLocaleTimeString()}</div>
        </div>
      </Space>
    </Card>
  );
};

export default ApiModeSwitch; 